<template>
	<view class="withdrawal">
		<view class="status-contents">
		    <view class="status" :style="[{height:statusBar+ 'px'}]"></view>  
		    <view class="navigation" :style="[{top:statusBar+ 'px'}]">
		    	<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
		    	<view class="navigation-title">我的余额</view>
		    </view>
		</view>
		<!-- <view style="background: #FFE066;">
			<view class="status-relative" :style="[{height:statusBar+ 'px'}]"></view>
			<view style="height: 88rpx;width: 750rpx;"></view>
		</view> -->
		<view class="header">
			<image src="/static/images/balancebg.png" class="balancebg" mode=""></image>
			<!-- <view class="current-balance">
				<view class="current-balance-left">
					<view class="current-balance-text">可提现余额</view>
					<image src="/static/images/rightjiao.png" class="right-jiao" mode=""></image>
				</view>
				
				<view class="current-balance-num">
					<text>￥</text>
					<text v-if="user">{{ user.balance }}</text>
				</view>
			</view> -->
			<view class="available-balance">
				<view class="current_balance">当前余额(元)</view>
				<view class="current_balance_num">{{ user.balance }}</view>
				<view class="withdrawal_btn" @click="goWithdraw()">提现</view>
			</view>
		</view>
		<view class="withdrawal-instructions">
			<view class="withdrawal-instructions-title">提现说明</view>
			<view class="withdrawal-instructions-text"><view>1.</view><view>每次提现金额1元起提，随时可提，即时到账。</view></view>
			<view class="withdrawal-instructions-text"><view>2.</view><view>提现需实名认证，请填写正确的支付宝账号或银行卡号，如信息填写错误会导致提现失败。</view></view>
			<view class="withdrawal-instructions-text"><view>3.</view><view>依法纳税是每个公民的义务，平台提现收取10%手续费包含代扣代缴个人所得税。</view></view>
		</view>
		
		
		
		
		<!-- <view class="withdrawal-form">
			<view class="withdrawal-title">提现金额(元)</view>
			<view class="withdrawal-num-ipt">
				<view class="money-icon">￥</view>
				<view>
					<input type="digit" value="" v-model="withdraw_amount" placeholder="请输入提现金额" placeholder-style="font-size:26rpx;" class="money-num-ipt" />
				</view>
			</view>
			<view class="withdrawal-tips withdrawal-tips1">可提现金额¥{{ user.balance }}</view>
			<view class="withdrawal-tips">提现手续费3.0%，手续费{{ (withdraw_amount*0.03).toFixed(2) }}元</view>
			<view class="withdrawal-btn" @click="allWithdraws()">全部提现</view>
		</view>
		<view class="withdrawal-methods">
			<view class="withdrawal-methods-title">请选择提现方式</view>
			<view class="choice-item" @click="choiceMethods(1)">
				<view class="choice-item-left">
					<image src="/static/images/wechat.png" class="wechat-methods" mode=""></image>
					<view>提现到微信</view>
				</view>
				<view class="choice-radio">
					<image src="/static/images/choiced.png" class="choiced" v-if="choiceType==1" mode=""></image>
					<view v-else></view>
				</view>
			</view>
			<view class="choice-item" @click="choiceMethods(2)">
				<view class="choice-item-left">
					<image src="/static/images/ali.png" class="wechat-methods" mode=""></image>
					<view>提现到支付宝</view>
				</view>
				<view class="choice-radio">
					<image src="/static/images/choiced.png" class="choiced" v-if="choiceType==2" mode=""></image>
					<view v-else></view>
				</view>
			</view>
		</view> -->
		
		<!-- <view class="withdrawal-confirm" @click="withdraws()" >确认提现</view> -->
		<uni-popup ref="withdrawalStatePopup" type="center" :mask-click="false">
			<view class="withdrawal-state-modal">
				<view class="withdrawal-success" v-if="withdrawalState=='pending'">
					<image src="/static/images/success.png" class="success" mode=""></image>
					<view class="withdrawal-state-text">提现审核中</view>
					<view class="withdrawal-state-tips">请稍后查看放款结果，如放款成功，款项将汇入您的
						<!-- <text class="account-type" v-if="choiceType=='alipay'">支付宝账户</text>
						<text class="account-type" v-if="choiceType=='unionpay'">{{ bank_name }}</text> 
						<text class="account-num" v-if="choiceType=='alipay'">({{ user.alipay_user_no }}）</text>
						<text class="account-num" v-if="choiceType=='unionpay'">({{ cert_number }}）</text> -->
						 账户内，请注意查收！
					</view>
					<view class="withdrawal-success-btn-operation">
						<view class="back-home" @click="backHome()">返回首页</view>
					</view>
				</view>
				<view class="withdrawal-fail" v-if="withdrawalState=='failed'">
					<image src="/static/images/fail.png" class="fail" mode=""></image>
					<view class="withdrawal-state-text">提现失败</view>
					<view class="withdrawal-state-tips">{{ remark }}</view>
					<view class="withdrawal-fail-btn-operation">
						<view class="again-withdrawal" @click="closePop()">重新提现</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="webtips">--此网页由<text style="margin:0 10rpx">shopwap.littleshop.shop</text>提供--</view>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations} from 'vuex'
	import { withdraws,checkWithdrawState } from 'api/userAccountApi'
	import { getUser } from "api/userApi"
	
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar'
			])
		},
		data() {
			return {
				source:source,
				withdrawalState:null,
				remark:null
			}
		},
		methods: {
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			closePop(){
				this.$refs.withdrawalStatePopup.close()
			},
			backHome(){
				this.$refs.withdrawalStatePopup.close()
				if(this.source == 'wap'){
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/mine/mine'
						})
					},300)
				}else{
					// window.flutter_inappwebview.callHandler('back_to_app', '')
					backToApp.postMessage('back');
				}
			},
			checkWithdrawState(){
				checkWithdrawState().then(res=>{
					if(res.data){
						this.withdrawalState = res.data.status
						this.remark = res.data.remark
						if(res.data.status=='pending' || res.data.status=='failed'){
							this.$refs.withdrawalStatePopup.open('center')
						}
					}
				})
			},
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					// window.flutter_inappwebview.callHandler('back_to_app', '')
					backToApp.postMessage('back');
				}
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			goWithdraw(){
				let freelance = this.user.freelance ;
				if(!freelance){
					uni.showModal({
						title: '提示',
						content: '您还未完成实名认证，请先完成认证后可提现！',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/packs/pages/withdrawal/realIdentification'
								})
							}
						}
					})
				}else{
					uni.navigateTo({
						url: `/packs/pages/withdrawal/withdrawal`
					})
				}
			}
		},
		async onShow(){
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			await this.getUser()
			this.checkWithdrawState()
		}
		
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.withdrawal{
		position: relative;
		min-height: 100vh;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: rgba(0,0,0,0);
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	
	.header{
		width: 100%;
		height: 452rpx;
		// background: #FFE066;
		position: relative;
	}
	.balancebg{
		display: block;
		width: 100%;
		height: 452rpx;
	}
	.available-balance{
		width: 686rpx;
		height: 504rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		position: absolute;
		left:50%;
		margin-left:-343rpx;
		bottom: -252rpx;
	}
	.current-balance{
		height:64rpx;
		display: flex;
		align-items: flex-end;
		padding-top:40rpx;
	}
	.current-balance-left{
		display: flex;
		align-items: center;
	}
	.right-jiao{
		display:block ;
		width: 24rpx;
		height: 24rpx;
	}
	.current-balance-text{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
		margin:0 14rpx 0 32rpx;
	}
	.current-balance-num{
		height:48rpx;
		display: flex;
		align-items:flex-end;
		font-size:64rpx;
		font-weight: 600;
		color: #333333;
		margin-left: 40rpx;
		>text:nth-child(1){
			font-size:34rpx;
			line-height: 34rpx;
			font-weight: 500;
		}
	}
	.withdrawal-form{
		width: 710rpx;
		height: 274rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 17rpx;
		position: relative;
		top:-112rpx;
		left:20rpx;
	}
	.withdrawal-num-ipt{
		display: flex;
		align-items: center;
		margin-top: 42rpx;
		height: 40rpx;
	}
	.money-icon{
		font-size: 40rpx;
		font-weight: 500;
		color: #2F2F2F;
		line-height: 40rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-left:10rpx;
		padding-bottom:5rpx;
	}
	.money-num-ipt{
		height: 28rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	.withdrawal-tips{
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 20rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin:20rpx 0 20rpx 24rpx;
	}
	.withdrawal-tips1{
		font-size: 26rpx;
		color:#555555;
		margin-top:50rpx;
	}
	.withdrawal-btn{
		width: 128rpx;
		height: 52rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 15rpx;
		border: 2rpx solid #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color:#555555;
		position: absolute;
		right:32rpx;
		top:102rpx;
	}
	.withdrawal-methods{
		width: 710rpx;
		height: 224rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 16rpx;
		margin:-92rpx auto 0;
	}
	.withdrawal-methods-title,.withdrawal-title,.withdrawal-instructions-title{
		height: 28rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333330;
		line-height: 28rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-left: 24rpx;
		padding-top: 32rpx;
		
	}
	.choice-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:28rpx 0;
	}
	.wechat-methods{
		display: block;
		width:44rpx;
		height: 44rpx;
		border-radius: 50%;
		margin:0 16rpx 0 24rpx;
	}
	.choice-item-left{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 24rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	.choice-radio{
		margin-right: 24rpx;
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		>view{
			width:28rpx;
			height: 28rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
			border: 2rpx solid #CECFD0;
			border-radius: 50%;

		}
	}
	.choiced{
		display: block;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}
	.withdrawal-instructions{
		width: 686rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
		margin:276rpx auto 0;
		padding-bottom: 30rpx;
		background: linear-gradient(180deg, #FEF0F0 0%, #FFFFFF 27%, #FFFFFF 100%);
		border-radius: 32rpx;
	}
	.withdrawal-instructions-text{
		display: flex;
		// align-items: center;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height:35rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin:20rpx 0 0 24rpx;
		>view:nth-child(1){
			width: 40rpx;
			height: 40rpx;
			display: flex;
			// align-items: center;
			justify-content: center;
			// background: #999999;
			// border-radius: 50%;
			// color:#FFFFFF;
			margin-right: 10rpx;
		}
		>view:nth-child(2){
			width: 600rpx;
		}
	}
	.withdrawal-confirm{
		width: 614rpx;
		height: 84rpx;
		background: linear-gradient(146deg, #FFDA55 0%, #FEBF05 100%);
		border-radius: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		margin:40rpx auto;
	}
	.tips{
		position: absolute;
		left:0;
		bottom:20rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
	.current_balance{
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		margin-top: 64rpx;
		text-align: center;
	}
	.current_balance_num{
		font-size: 84rpx;
		font-weight: bold;
		color: #333333;
		line-height: 96rpx;
		text-align: center;
		margin-top: 46rpx;
	}
	.withdrawal_btn{
		width: 400rpx;
		height: 84rpx;
		background: #FED100;
		border-radius: 42rpx;
		margin: 100rpx auto 0;
		display: flex;
		align-items: center;
		justify-content:center;
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}
	.webtips{
		position: absolute;
		left:0;
		bottom:120rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
	.withdrawal-state-modal{
		width: 686rpx;
		padding-bottom: 64rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.withdrawal-success{
		padding-top: 64rpx;
		.success{
			display: block;
			width: 96rpx;
			height: 96rpx;
			margin:0 auto;
		}
		.withdrawal-state-text{
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			margin-top: 24rpx;
		}
		.withdrawal-state-tips{
			width: 520rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin: 24rpx auto 0;
			text-align: center;
			letter-spacing: 1rpx;
			.account-type{
				color:#333333;
			}
			.account-num{
				color:#1877FF;
				margin:0 5rpx;
			}
		}
		.withdrawal-success-btn-operation{
			display: flex;
			justify-content: center;
			margin-top: 80rpx;
			.go-detail{
				width: 272rpx;
				height: 84rpx;
				border-radius: 48rpx;
				border: 1rpx solid #1861F2;
				font-size: 36rpx;
				font-weight: 400;
				color: #1861F2;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 56rpx;
			}
			.back-home{
				width: 272rpx;
				height: 84rpx;
				background: #1877FF;
				border-radius: 48rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.withdrawal-fail{
		padding-top: 64rpx;
		.fail{
			display: block;
			width: 96rpx;
			height: 96rpx;
			margin:0 auto;
		}
		.withdrawal-state-text{
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			margin-top: 24rpx;
		}
		.withdrawal-state-tips{
			width: 520rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin: 24rpx auto 0;
			text-align: center;
		}
		.withdrawal-fail-btn-operation{
			display: flex;
			justify-content: center;
			margin-top: 80rpx;
			.again-withdrawal{
				width: 272rpx;
				height: 84rpx;
				background: #1877FF;
				border-radius: 48rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
